<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script>
        /*
        ajax a -> 异步 有异步便有同步
          异步  与后台交互时页面不跳转
          同步  与后台交互页面跳转等待
        j -> java and x -> xml扩展标记语言
        */
         /*  if(booleam 布尔类型) if(4 属于条件表达式)
            当括号里是条件表达式时 把条件表达式的结果 强制转换为布尔类型
            只要条件表达式的内容不为0，就是true.  0| undefined | null | ' '为false  */

        //做一个拖动元素

        //先做鼠标移动
        var mx ,my;//这个是兼容的x y声明定义
        var ad,bar; //div 的声明变量
        var drag; //开关
        var px = 0,py = 0;//定义鼠标点到div左顶点的偏移量
        //onmouseover 鼠标悬停 onmousemove 鼠标移动 onmouseout 鼠标离开 onmousedown 鼠标按下去 onmouseup 鼠标松开
        //窗体加载完成
         window.onload = function () {
             ad = document.getElementById('ad');
             bar = document.getElementById('bar');
             bar.onmousedown = function (e) {
                 //鼠标坐标
                 var cx = e.clientX?e.clientX:e.layerX;
                 var cy = e.clientY?e.clientY:e.layerY;
                 //div的坐标
                 var dx = parseInt(ad.style.left);
                 var dy = parseInt(ad.style.top);
                 //偏移量
                 px = cx - dx;
                 py = cy - dy;

                 drag = 1;
             };
             bar.onmouseup = function () {
                 drag = 0;
             };
         };

        document.onmousemove = function (e) { //e为一个变量名
             // console.info(); //控制台 控制台方式打印
            //控制台 输出鼠标的坐标 事件对象的属性 clientX[layerX]  clientY[layerY] 两种方法用于不同的浏览器
            // 1.当要兼容浏览器时 先定义x y 然后写if判断
               /* if(e.clientX){
                    mx = e.clientX;
                }else {
                    mx = e.layerX;
                }
                if(e.clientY){
                    mx = e.clientY;
                }else {
                    mx = e.layerY;
                }*/
            // 2.三元运算符  boolean? x:y; 也需要声明定义 x y
                mx = e.clientX?e.clientX:e.layerX;
                my = e.clientY?e.clientY:e.layerY;

                //用一个if把开关放进去
                if (drag) {
                    //div跟着鼠标坐标移动 先声明一个定义 (sd)
                    ad.style.top = my - py + 'px';
                    ad.style.left = mx - px + 'px';
                }
        }

    </script>
</head>
  <body>
     <div id="ad" style="height: 300px;width: 300px;position: absolute;left: 0;top: 0;border: 1px solid gray;">
        <div id="bar" style="height: 30px;width: 300px;line-height: 30px;background-color: #7ec8ea;border-bottom: 1px solid gray;cursor: move;">标题</div>

     </div>
  </body>
</html>